<template>
  <div>
    <!--
    买入批次<el-date-picker
          style="width: 120px; margin-right:30px; margin-left:10px"
            v-model="searchData.buy_num.value"
            value-format="YYYY-MM"
            type="month"
            placeholder="买入批次"
            :default-value="new Date(2024, 1, 1)"
          />
      </div>

        母牛品种<el-select v-model="searchData.sort.value" placeholder="母牛品种" style="width: 120px; margin-right:30px; margin-left:10px">
          <el-option label="西门塔尔牛" value="西门塔尔牛"/>
          <el-option label="鲁西黄牛" value="鲁西黄牛"/>
          <el-option label="夏洛莱牛" value="夏洛莱牛"/>
        </el-select>
     -->
    <div class="search-line">
      非合同资料id
      <el-input v-model="searchData.id.value" style="width: 80px; margin-right:30px; margin-left:10px"/>
      非合同资料名
      <el-input v-model="searchData.nconMarName.value" style="width: 80px; margin-right:30px; margin-left:10px"/>
      项目id
      <el-input v-model="searchData.projId.value" style="width: 80px; margin-right:30px; margin-left:10px"/>
      资料类型ID
      <el-input v-model="searchData.nconTypeId.value" style="width: 80px; margin-right:30px; margin-left:10px"/>
      文件日期
      <el-input v-model="searchData.fileDate.value" style="width: 80px; margin-right:30px; margin-left:10px"/>
      内容事项
      <el-input v-model="searchData.nconMat.value" style="width: 80px; margin-right:30px; margin-left:10px"/>
      产生部门id
      <el-input v-model="searchData.initDeptId.value" style="width: 80px; margin-right:30px; margin-left:10px"/>
      一般材料备注
      <el-input v-model="searchData.remark.value" style="width: 80px; margin-right:30px; margin-left:10px"/>
      录入人员id
      <el-input v-model="searchData.initUserId.value" style="width: 80px; margin-right:30px; margin-left:10px"/>
      资料页数
      <el-input v-model="searchData.nconPage.value" style="width: 80px; margin-right:30px; margin-left:10px"/>
      创建时间
      <el-input v-model="searchData.createTime.value" style="width: 80px; margin-right:30px; margin-left:10px"/>
      更新时间
      <el-input v-model="searchData.updataTime.value" style="width: 80px; margin-right:30px; margin-left:10px"/>
      文件数量
      <el-input v-model="searchData.fileCount.value" style="width: 80px; margin-right:30px; margin-left:10px"/>
      完成状态0未完成 1完成
      <el-input v-model="searchData.status.value" style="width: 80px; margin-right:30px; margin-left:10px"/>
      <el-button type="primary" @click="loadData()">查询</el-button>
      <el-button type="warning" @click="clearnSearch()">重置</el-button>
      <el-button type="success" @click="addDialog = true">添加</el-button>
    </div>

    <div class="border w-full">
      <el-table :data="tableData.records">
        <!---------------------表单数据------------------------------->
        <el-table-column prop="id" label="非合同资料id" width="100"/>
        <el-table-column prop="nconMarName" label="非合同资料名" width="100"/>
        <el-table-column prop="projId" label="项目id" width="100"/>
        <el-table-column prop="nconTypeId" label="资料类型ID" width="100"/>
        <el-table-column prop="fileDate" label="文件日期" width="100"/>
        <el-table-column prop="nconMat" label="内容事项" width="100"/>
        <el-table-column prop="initDeptId" label="产生部门id" width="100"/>
        <el-table-column prop="remark" label="一般材料备注" width="100"/>
        <el-table-column prop="initUserId" label="录入人员id" width="100"/>
        <el-table-column prop="nconPage" label="资料页数" width="100"/>
        <el-table-column prop="createTime" label="创建时间" width="100"/>
        <el-table-column prop="updataTime" label="更新时间" width="100"/>
        <el-table-column prop="fileCount" label="文件数量" width="100"/>
        <el-table-column prop="status" label="完成状态0未完成 1完成" width="100"/>
        <!---------------------表单数据------------------------------->
        <el-table-column label="操作">
          <template #default="scope">
            <el-button size="small" @click="openDetail(scope.row.id)">详情</el-button>
            <el-button size="small" @click="openEdit(scope.row.id)">修改</el-button>
            <el-button size="small" @click="deleted(scope.row.id)" type="danger">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <el-pagination
        style="margin-bottom: 20px"
        background
        layout="prev, pager, next"
        :page-count="tableData.pages"
        v-model:current-page="tableData.page"
        @update:current-page="loadData"
    />
    <!--------------------------------组件------------------>

    <!--  图片的 新增、修改-
    <ImgsUpload
       :fileList=imgList
       @changeImgList="changeImgList"
       arrLength="6"
       />
       -->

    <!-- 图片查看
    <ImgsShow
    :fileList=imgList
    />

    -->

    <!----select 框
       <el-select v-model="form.sort" placeholder="选择" style="width: 240px">
      <el-option
        v-for="item in options"
        :key="item.value"
        :label="item.label"
        :value="item.value"
        :disabled="item.disabled"
      />
    </el-select>

     <el-select v-model="form.feedType" placeholder="饲养类型" style="width: 240px">
      <el-option label="内养" value="内养"/>
      <el-option label="寄养" value="寄养"/>
    </el-select>

    ----  -->

    <!-- 时间选择器
<div class="block">

  <el-date-picker
    v-model="form.buyTime"
    value-format="YYYY-MM-DD"
    type="date" // month // year
    placeholder="Pick a date"
    :default-value="new Date(2014, 1, 1)"
  />
</div>
-->

    <!------------------详情弹窗--------------------------------->
    <el-dialog
        :close-on-click-modal="false"
        :close-on-press-escape="false"
        v-model="detailDialog"
        title="详情"
        width="30%"
        :before-close="resetForm"
    >
      <div>
        <div>
          非合同资料名 : {{ form.nconMarName }}
        </div>
        <div>
          项目id : {{ form.projId }}
        </div>
        <div>
          资料类型ID : {{ form.nconTypeId }}
        </div>
        <div>
          文件日期 : {{ form.fileDate }}
        </div>
        <div>
          内容事项 : {{ form.nconMat }}
        </div>
        <div>
          产生部门id : {{ form.initDeptId }}
        </div>
        <div>
          一般材料备注 : {{ form.remark }}
        </div>
        <div>
          录入人员id : {{ form.initUserId }}
        </div>
        <div>
          资料页数 : {{ form.nconPage }}
        </div>
        <div>
          创建时间 : {{ form.createTime }}
        </div>
        <div>
          更新时间 : {{ form.updataTime }}
        </div>
        <div>
          文件数量 : {{ form.fileCount }}
        </div>
        <div>
          完成状态0未完成 1完成 : {{ form.status }}
        </div>
      </div>
      <el-button @click="resetForm">关闭</el-button>
    </el-dialog>

    <!------------------新增弹窗--------------------------------->
    <el-dialog
        :close-on-click-modal="false"
        :close-on-press-escape="false"
        v-model="addDialog"
        title="新增"
        width="30%"
        :before-close="resetForm"
    >
      <!--数据开始---->
      <el-form :model="form" label-width="120px">
        <el-form-item label="非合同资料名">
          <el-input v-model="form.nconMarName"/>
        </el-form-item>
        <el-form-item label="项目id">
          <el-input v-model="form.projId"/>
        </el-form-item>
        <el-form-item label="资料类型ID">
          <el-input v-model="form.nconTypeId"/>
        </el-form-item>
        <el-form-item label="文件日期">
          <el-input v-model="form.fileDate"/>
        </el-form-item>
        <el-form-item label="内容事项">
          <el-input v-model="form.nconMat"/>
        </el-form-item>
        <el-form-item label="产生部门id">
          <el-input v-model="form.initDeptId"/>
        </el-form-item>
        <el-form-item label="一般材料备注">
          <el-input v-model="form.remark"/>
        </el-form-item>
        <el-form-item label="录入人员id">
          <el-input v-model="form.initUserId"/>
        </el-form-item>
        <el-form-item label="资料页数">
          <el-input v-model="form.nconPage"/>
        </el-form-item>
        <el-form-item label="创建时间">
          <el-input v-model="form.createTime"/>
        </el-form-item>
        <el-form-item label="更新时间">
          <el-input v-model="form.updataTime"/>
        </el-form-item>
        <el-form-item label="文件数量">
          <el-input v-model="form.fileCount"/>
        </el-form-item>
        <el-form-item label="完成状态0未完成 1完成">
          <el-input v-model="form.status"/>
        </el-form-item>
        <!--数据截止---->
        <el-form-item>
          <el-button type="primary" @click="add">添加</el-button>
          <el-button @click="resetForm">取消</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>

    <!------------------编辑弹窗--------------------------------->
    <el-dialog
        :close-on-click-modal="false"
        :close-on-press-escape="false"
        v-model="editDialog"
        title="编辑"
        width="30%"
        :before-close="resetForm"
    >
      <!--数据开始---->
      <el-form :model="form" label-width="120px">
        <el-form-item label="非合同资料名">
          <el-input v-model="form.nconMarName"/>
        </el-form-item>
        <el-form-item label="项目id">
          <el-input v-model="form.projId"/>
        </el-form-item>
        <el-form-item label="资料类型ID">
          <el-input v-model="form.nconTypeId"/>
        </el-form-item>
        <el-form-item label="文件日期">
          <el-input v-model="form.fileDate"/>
        </el-form-item>
        <el-form-item label="内容事项">
          <el-input v-model="form.nconMat"/>
        </el-form-item>
        <el-form-item label="产生部门id">
          <el-input v-model="form.initDeptId"/>
        </el-form-item>
        <el-form-item label="一般材料备注">
          <el-input v-model="form.remark"/>
        </el-form-item>
        <el-form-item label="录入人员id">
          <el-input v-model="form.initUserId"/>
        </el-form-item>
        <el-form-item label="资料页数">
          <el-input v-model="form.nconPage"/>
        </el-form-item>
        <el-form-item label="创建时间">
          <el-input v-model="form.createTime"/>
        </el-form-item>
        <el-form-item label="更新时间">
          <el-input v-model="form.updataTime"/>
        </el-form-item>
        <el-form-item label="文件数量">
          <el-input v-model="form.fileCount"/>
        </el-form-item>
        <el-form-item label="完成状态0未完成 1完成">
          <el-input v-model="form.status"/>
        </el-form-item>
        <!--数据截止---->
        <el-form-item>
          <el-button type="primary" @click="edit">修改</el-button>
          <el-button @click="resetForm">取消</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>


  </div>
</template>

<script setup>
import {ElMessage, ElMessageBox} from "element-plus";
import {onMounted, reactive, ref} from "vue";
import ImgsUpload from "@/components/img/imgsUpload/index.vue"
import ImgsShow from "@/components/img/imgShow/index.vue"
import {
  getNconMaterialPage,
  updateNconMaterial,
  deletedNconMaterial,
  addNconMaterial,
  getNconMaterialById
} from "@/api/nconMaterial";
import {useUserStore} from "@/stores/userStores";

const tableData = reactive({
  records: [],
  orderBy: '',
  pages: 0,
  page: 1,
  size: 10,
  query: {}
});
const form = ref({
  id: '', //非合同资料id
  nconMarName: '', //非合同资料名
  projId: '', //项目id
  nconTypeId: '', //资料类型ID
  fileDate: '', //文件日期
  nconMat: '', //内容事项
  initDeptId: '', //产生部门id
  remark: '', //一般材料备注
  initUserId: '', //录入人员id
  nconPage: '', //资料页数
  createTime: '', //创建时间
  updataTime: '', //更新时间
  fileCount: '', //文件数量
  status: '', //完成状态0未完成 1完成
});
//------------选择框------------------------
const options = [
  {
    value: 'Option1',
    label: 'Option1',
  },
  {
    value: 'Option2',
    label: 'Option2',
    disabled: true,
  },

];

//------------基本常量------------------------
const userStore = useUserStore();
const token = userStore.token;
const detailDialog = ref(false);
const editDialog = ref(false);
const addDialog = ref(false);

// --------图片相关----------
const imgList = ref([])
const changeImgList = (array) => {
  imgList.value = array;
  form.value.pictures = JSON.stringify(array);
}

const dealImgJson = () => {
  // 图片处理
  console.log("拿到的图片值", form.value.pictures)
  if ('' != form.value.pictures && null != form.value.pictures) {
    imgList.value = JSON.parse(form.value.pictures.replace(/[\\]/g, ''));
  }
}

// ------------------- 搜索操作 ------------------------

const searchData = ref({
  //非合同资料id
  id: {
    key: 'id',
    sqlKeyword: 'EQ',
    value: ''
  },
  //非合同资料名
  nconMarName: {
    key: 'nconMarName',
    sqlKeyword: 'EQ',
    value: ''
  },
  //项目id
  projId: {
    key: 'projId',
    sqlKeyword: 'EQ',
    value: ''
  },
  //资料类型ID
  nconTypeId: {
    key: 'nconTypeId',
    sqlKeyword: 'EQ',
    value: ''
  },
  //文件日期
  fileDate: {
    key: 'fileDate',
    sqlKeyword: 'EQ',
    value: ''
  },
  //内容事项
  nconMat: {
    key: 'nconMat',
    sqlKeyword: 'EQ',
    value: ''
  },
  //产生部门id
  initDeptId: {
    key: 'initDeptId',
    sqlKeyword: 'EQ',
    value: ''
  },
  //一般材料备注
  remark: {
    key: 'remark',
    sqlKeyword: 'EQ',
    value: ''
  },
  //录入人员id
  initUserId: {
    key: 'initUserId',
    sqlKeyword: 'EQ',
    value: ''
  },
  //资料页数
  nconPage: {
    key: 'nconPage',
    sqlKeyword: 'EQ',
    value: ''
  },
  //创建时间
  createTime: {
    key: 'createTime',
    sqlKeyword: 'EQ',
    value: ''
  },
  //更新时间
  updataTime: {
    key: 'updataTime',
    sqlKeyword: 'EQ',
    value: ''
  },
  //文件数量
  fileCount: {
    key: 'fileCount',
    sqlKeyword: 'EQ',
    value: ''
  },
  //完成状态0未完成 1完成
  status: {
    key: 'status',
    sqlKeyword: 'EQ',
    value: ''
  },

});

function clearnSearch() {
  searchData.value.id.value = '';
  searchData.value.nconMarName.value = '';
  searchData.value.projId.value = '';
  searchData.value.nconTypeId.value = '';
  searchData.value.fileDate.value = '';
  searchData.value.nconMat.value = '';
  searchData.value.initDeptId.value = '';
  searchData.value.remark.value = '';
  searchData.value.initUserId.value = '';
  searchData.value.nconPage.value = '';
  searchData.value.createTime.value = '';
  searchData.value.updataTime.value = '';
  searchData.value.fileCount.value = '';
  searchData.value.status.value = '';
  loadData();

}


/**
 * 查看详情
 * */
const openDetail = async (id) => {
  const res = await getNconMaterialById(id);
  form.value = res.data;
  // 图片处理
  dealImgJson();
  detailDialog.value = true;
}

/**
 * 打开编辑按钮
 */
const openEdit = async (id) => {
  const res = await getNconMaterialById(id);
  form.value = res.data;
  // 图片处理
  dealImgJson();
  editDialog.value = true;
};

/**
 *修改
 */
const edit = async () => {
  const res = await updateNconMaterial(form.value);
  ElMessage.success("修改成功");
  editDialog.value = false;
  loadData();
  resetForm();
};

/**
 *添加
 */
const add = async () => {
  const res = await addNconMaterial(form.value);
  ElMessage.success("添加成功");
  addDialog.value = false;
  loadData();
  resetForm();
};

/**
 * 删除数据
 */
const deleted = async (id) => {
  ElMessageBox.confirm("是否确认删除？", "提示", {
    confirmButtonText: "确认",
    cancelButtonText: "取消",
    type: "warning",
  }).then(async () => {
    const res = await deletedNconMaterial({id});
    ElMessage.success("success");
    loadData();
  });
};

/**
 * 重置表单
 */
const resetForm = () => {
  if (addDialog.value) {
    addDialog.value = false;
  }
  if (editDialog.value) {
    editDialog.value = false;
  }
  if (detailDialog.value) {
    detailDialog.value = false;
  }
  form.value = {};
  // 图片处理
  imgList.value = [];
};

const loadData = async () => {
  tableData.query = searchData.value;
  const res = await getNconMaterialPage(tableData);
  tableData.records = res.data.list;
  tableData.page = res.data.page;
  tableData.pages = res.data.pages;
};
onMounted(() => {
  // 初始加载分页数据
  loadData(tableData);
});
</script>

<style scoped>

.search-line {
  display: flex;
  margin-bottom: 10px;
  text-align: center;
  line-height: 35px;
}

</style>

